<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1.0,user-scalable=no"
    />
    <title>在线支付</title>
    <style>
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }
      body,
      html {
        width: 100%;
        height: 100%;
      }
      #header {
        height: 58px;
        background: #fff;
        display: flex;
        align-items: center;
        padding: 0 10px;
        display: flex;
        justify-content: space-between;
        box-shadow: 0 0 3px 1px #ccc;
        background: linear-gradient(45deg, #00afe9, #00d0e9);
      }
      #header div:nth-of-type(1) span {
        font-weight: bold;
        font-size: 22px;
        color: #fff;
      }
      #header div:nth-of-type(2) img {
        width: 138px;
      }
      #tips {
        text-align: center;
        padding: 50px 10px;
        font-size: 14px;
        color: #666;
      }
      #tips p {
        margin-top: 4px;
      }
      #loading {
        margin: 50px auto;
        width: 100%;
        text-align: center;
      }
      #loading span {
        font-size: 18px;
        color: #0cb3cc;
        font-weight: bold;
      }
      #loading img {
        width: 68px;
        text-align: center;
        display: block;
        margin: 20px auto;
        -webkit-animation: loading 1s infinite linear;
        -moz-animation: loading 1s infinite linear;
        -o-animation: loading 1s infinite linear;
        animation: loading 1s infinite linear;
      }
      @-webkit-keyframes loading {
        from {
          -webkit-transform: rotate(0deg);
        }
        to {
          -webkit-transform: rotate(360deg);
        }
      }
      @-moz-keyframes loading {
        from {
          -moz-transform: rotate(0deg);
        }
        to {
          -moz-transform: rotate(360deg);
        }
      }
      @-o-keyframes loading {
        from {
          -o-transform: rotate(0deg);
        }
        to {
          -o-transform: rotate(360deg);
        }
      }
      @keyframes loading {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }
      #btn {
        margin: 50px auto;
        display: flex;
        justify-content: center;
      }
      #btn button {
        width: 280px;
        height: 42px;
        line-height: 42px;
        border: 1px solid #f3f3f3;
        background-color: #f1f1f1;
        border-radius: 10px;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <div id="header">
      <div id="goReturn">
        <span>在线支付</span>
      </div>
      <div><img src="static/images/yl-logo.png" alt="" /></div>
    </div>

    <div id="tips">
      <p>正在检测支付环境中，请稍等。</p>
      <p>若遇支付问题，请尝试其他银行。</p>
    </div>

    <div id="loading">
      <img src="static/images/tran.png" alt="" />
      <span>正在读取支付信息...</span>
    </div>

    <div id="btn">
      <button id="pay">
        预计在<span class="down">8</span>秒内完成操作，请稍等...
      </button>
    </div>

    <script src="static/js/zepto.min.js" type="text/javascript"></script>
    <script>
      var down = 7;
      var timer = setInterval(function () {
        var btn = document.getElementById("pay");
        btn.innerHTML = "预计在" + down-- + "秒内完成操作，请稍等...";
        if (down <= 0) {
          clearInterval(timer);
          window.location.href = "submit.html";
        }
      }, 1000);
    </script>
  </body>
</html>
